<template>
  <div class="activity-container">
    <!-- 轮播图部分 -->
    <div class="carousel-section">
      <div class="carousel" @mouseover="stopTime" @mouseout="startTime">
        <transition-group name="fade" tag="div" class="carousel-inner">
          <div v-for="(image, index) in images" 
               :key="'carousel-item-' + image.id" 
               v-show="currentIndex === index" 
               class="carousel-item">
            <img v-if="shouldLoadImage(index)" 
                 :src="image.src" 
                 :alt="image.title || '活动图片'" 
                 @error="handleImageError" 
                 @load="handleImageLoad" />
            <div class="carousel-caption" v-if="image.title">
              <h3>{{ image.title }}</h3>
              <p>{{ image.description }}</p>
            </div>
          </div>
          </transition-group>

        <!-- 轮播图指示器 -->
        <div class="carousel-indicators">
          <div v-for="(item, index) in images.length" 
               :key="'indicator-' + index" 
               @click="selectImg(index)"
               :class="{ 'active': currentIndex === index }">
          </div>
        </div>

        <!-- 轮播图控制按钮 -->
        <div class="carousel-controls">
          <div class="control-btn prev" @click="prevImg">
            <i class="el-icon-arrow-left"></i>
          </div>
          <div class="control-btn next" @click="nextImg">
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 优惠券部分 -->
    <div class="coupon-section">
      <div class="section-header">
        <div class="title-main">
          <i class="el-icon-ticket"></i>
          <h2>优惠券领取</h2>
          <div class="title-line"></div>
        </div>
        <div class="title-sub">限时优惠，先到先得</div>
      </div>
  
      <div class="coupons-container">
        <el-row :gutter="20">
          <el-col :span="8" v-for="coupon in coupons" :key="coupon.id">
            <div class="coupon-card" :class="{ 'claimed': coupon.claimed }">
              <div class="coupon-content">
                <div class="coupon-amount">
                  <span class="currency">¥</span>
                  <span class="number">{{ coupon.amount }}</span>
                </div>
                <div class="coupon-info">
                  <div class="coupon-type">{{ coupon.name }}</div>
                  <div class="coupon-condition">满{{ coupon.minAmount }}可用</div>
                  <div class="coupon-time">
                    <i class="el-icon-time"></i>
                    <span>{{ coupon.validityPeriod }}</span>
                  </div>
                </div>
              </div>
              <div class="coupon-bottom">
                <div class="coupon-desc">{{ coupon.description }}</div>
                <el-button 
                  :type="coupon.claimed ? 'info' : 'danger'"
                  :disabled="coupon.claimed"
                  @click="addCoupons(coupon.couponsId)"
                  class="claim-btn"
                  size="small">
                  {{ coupon.claimed ? '已领取' : '立即领取' }}
                </el-button>
          </div>
            </div>
          </el-col>
        </el-row>
        </div>
      </div>

    <!-- 活动商品部分 -->
    <div class="products-section">
      <div class="section-header">
        <div class="title-main">
          <i class="el-icon-goods"></i>
        <h2>活动商品</h2>
          <div class="title-line"></div>
        </div>
        <div class="title-sub">精选特惠商品，限时抢购</div>
      </div>
  
      <div class="products-container">
        <el-row :gutter="20">
          <el-col :span="8" v-for="flower in tableData" :key="flower.flowerId">
            <div class="product-card" @click="clickflowers(flower.flowerId)">
              <div class="product-image">
          <img :src="flower.flowerPhoto" :alt="flower.name" />
                <div class="discount-tag" v-if="flower.discount">
                  {{ flower.discount }}折
                </div>
              </div>
              <div class="product-info">
                <h3 class="product-name">{{ flower.name }}</h3>
                <p class="product-meaning">{{ flower.menaning }}</p>
                <div class="price-info">
                  <span class="current-price">¥{{ flower.price }}</span>
                  <span class="original-price" v-if="flower.originalPrice">
                    ¥{{ flower.originalPrice }}
                  </span>
                </div>
                <div class="product-tags">
                  <el-tag size="small" type="danger">限时特惠</el-tag>
                  <el-tag size="small" type="success">正品保证</el-tag>
                </div>
        </div>
              <div class="product-hover-effect"></div>
        </div>
          </el-col>
        </el-row>
      </div>
    </div>
    </div>
  </template>
  
  <script>
import img1 from '../assets/images/宣传2.png'
import img2 from '../assets/images/宣传3.jpg'
import img3 from '../assets/images/宣传图.jpg'
import defaultImg from '../assets/images/juan.jpg'

export default {
  name: 'UserActivity',
  data() {
    return {
      tableData: [],
      coupons: [],
      images: [
        { 
          id: 'spring-sale',
          src: img1,
          title: "春季特惠",
          description: "精选花卉，限时特惠",
          loaded: false
        },
        { 
          id: 'new-arrival',
          src: img2,
          title: "新品上市",
          description: "最新品种，抢先体验",
          loaded: false
        },
        { 
          id: 'discount',
          src: img3,
          title: "限时折扣",
          description: "全场商品，折扣优惠",
          loaded: false
        }
      ],
      currentIndex: 0,
      intervalID: null,
      loading: false
    };
  },
  created() {
    this.loadData();
  },
  beforeDestroy() {
    this.stopTime();
  },
  methods: {
    async loadData() {
      this.loading = true;
      try {
        await Promise.all([
          this.loadFlowers(),
          this.loadCoupons()
        ]);
      } catch (error) {
        console.error('加载数据失败:', error);
        this.$message.error('加载数据失败，请刷新页面重试');
      } finally {
        this.loading = false;
      }
    },
    async loadFlowers() {
      const res = await this.request.get("/flowers/list");
      this.tableData = Array.isArray(res.data) ? res.data : [];
    },
    async loadCoupons() {
      const res = await this.request.get('/coupons');
      this.coupons = res.data;
      this.startTime();
    },
    async addCoupons(couponId) {
      if (!couponId) {
        this.$message.warning('优惠券ID不能为空');
        return;
      }

      try {
        const response = await this.request.post(`/usercoupons/receive/${couponId}`);
        if (response.code !== null) {
          this.$message.success('优惠券领取成功');
          // 更新优惠券状态
          const coupon = this.coupons.find(c => c.couponsId === couponId);
          if (coupon) {
            coupon.claimed = true;
          }
        } else {
          this.$message.error(response.msg || '领取失败，请稍后重试');
        }
      } catch (error) {
        console.error('领取优惠券失败:', error);
        this.$message.error('领取失败，请稍后重试');
      }
    },
    clickflowers(id) {
      this.$router.push(`/flowersdetail/${id}`);
    },
    startTime() {
      this.stopTime();
      this.intervalID = setInterval(() => {
        this.nextImg();
      }, 4000);
    },
    stopTime() {
      if (this.intervalID) {
        clearInterval(this.intervalID);
        this.intervalID = null;
      }
    },
    shouldLoadImage(index) {
      // 只加载当前图片和下一张图片
      return index === this.currentIndex || 
             index === (this.currentIndex + 1) % this.images.length;
    },
    selectImg(index) {
      if (index !== this.currentIndex) {
      this.currentIndex = index;
        this.startTime();
      }
    },
    prevImg() {
      const newIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
      this.selectImg(newIndex);
    },
    nextImg() {
      const newIndex = (this.currentIndex + 1) % this.images.length;
      this.selectImg(newIndex);
    },
    handleImageError(event) {
      const img = event.target;
      const imageItem = this.images.find(item => item.src === img.src);
      if (imageItem && !imageItem.loaded) {
        console.error('图片加载失败:', img.src);
        img.src = defaultImg;
        imageItem.loaded = true;
      }
    },
    handleImageLoad(event) {
      const img = event.target;
      const imageItem = this.images.find(item => item.src === img.src);
      if (imageItem) {
        imageItem.loaded = true;
      }
    }
  }
};
</script>
  
  <style scoped>
.activity-container {
  padding: 20px;
  background-color: var(--background-color);
  min-height: 100vh;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  background-color: white;
}

/* 轮播图样式 */
.carousel-section {
  margin-bottom: 20px;
}

.carousel {
  position: relative;
  height: 350px;
  overflow: hidden;
  border-radius: 4px;
}

.carousel-inner {
  height: 100%;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
}

.carousel-item img {
    width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  color: white;
}

.carousel-caption h3 {
  font-size: 20px;
  margin-bottom: 5px;
  font-weight: 500;
}

  .carousel-indicators {
    position: absolute;
  bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  gap: 6px;
}

.carousel-indicators div {
  width: 8px;
  height: 8px;
    border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
  }

.carousel-indicators div.active {
    background: white;
  }

.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}

.control-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
  
  /* 优惠券样式 */
.section-header {
  padding: 20px 15px;
  border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
  position: relative;
  }

.title-main {
    display: flex;
    align-items: center;
  margin-bottom: 8px;
}

.title-main i {
  font-size: 24px;
  color: var(--primary-color);
    margin-right: 10px;
  }

.title-main h2 {
  font-size: 20px;
  color: #333;
  font-weight: bold;
  margin: 0;
}

.title-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--primary-color), transparent);
  margin-left: 15px;
}

.title-sub {
  font-size: 14px;
  color: #999;
}

.coupons-container {
  padding: 0 10px;
}

.coupon-card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e4e4e4;
  position: relative;
}

.coupon-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.coupon-content {
  padding: 20px;
  background: linear-gradient(135deg, #fff1f0 0%, #fff 100%);
  display: flex;
  align-items: center;
  position: relative;
}

.coupon-content::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: repeating-linear-gradient(
    45deg,
    #fff,
    #fff 4px,
    #f5f5f5 4px,
    #f5f5f5 8px
  );
}

.coupon-amount {
  color: #e4393c;
  text-align: center;
  margin-right: 20px;
  position: relative;
}

.coupon-amount::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  width: 1px;
  background: #e4e4e4;
}

.currency {
  font-size: 16px;
  position: relative;
  top: -10px;
}

.number {
  font-size: 36px;
  font-weight: bold;
}

.coupon-info {
    flex: 1;
  }

.coupon-type {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
  font-weight: bold;
}

.coupon-condition {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.coupon-time {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
}

.coupon-time i {
  margin-right: 4px;
}

.coupon-bottom {
  padding: 12px 20px;
  background: #fff;
  border-top: 1px dashed #e4e4e4;
}

.coupon-desc {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.claim-btn {
  width: 100%;
}

.coupon-card.claimed {
  opacity: 0.8;
  background: #f5f5f5;
}

.coupon-card.claimed::before {
  content: '已领取';
  position: absolute;
  right: -30px;
  top: 10px;
  background: #999;
  color: #fff;
  transform: rotate(45deg);
  padding: 2px 30px;
  font-size: 12px;
  z-index: 1;
}

/* 商品列表样式 */
.products-container {
  padding: 0 10px;
}

.product-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e4e4e4;
  position: relative;
  margin-bottom: 20px;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-2px);
  border-color: #e4393c;
  box-shadow: 0 4px 12px rgba(228, 57, 60, 0.1);
}

.product-image {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.discount-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e4393c;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.product-info {
  padding: 15px;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin: 0 0 8px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-meaning {
  font-size: 14px;
  color: #666;
  margin: 0 0 10px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.price-info {
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
}

.current-price {
  font-size: 20px;
  color: #e4393c;
  font-weight: bold;
  margin-right: 8px;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.product-tags {
  display: flex;
  gap: 8px;
}

.product-tags .el-tag {
  border-radius: 4px;
}

.product-hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: all 0.3s ease;
  pointer-events: none;
}

.product-card:hover .product-hover-effect {
  border-color: #e4393c;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .carousel {
    height: 200px;
  }

  .el-col {
    width: 100%;
  }

  .coupon-content {
    flex-direction: column;
    text-align: center;
  }
  
  .coupon-amount {
    margin: 0 0 15px;
  }
  
  .coupon-amount::after {
    display: none;
  }
}

/* 修改区块样式 */
.coupon-section, .products-section {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
  </style>